import React, { Component, Fragment } from 'react';
import DocumentTitle from 'react-document-title';
import { Row, Card, Col, Breadcrumb, Calendar, Statistic, Tabs, Radio } from 'antd';
import moment from 'moment';
import { setAuthority } from '@/utils/authority';
import { CommonStyle } from '@/layouts/components/style';
import { IconfontStyle } from '@/assets/iconfont/iconfont';
import ReactEcharts from 'echarts-for-react';
import styles from './Index.less';
import icon1 from '@/assets/images/guidepage/一张图.png';
import icon2 from '@/assets/images/guidepage/园林管理.png';
import icon3 from '@/assets/images/guidepage/市政管理.png';
import icon4 from '@/assets/images/guidepage/水务管理.png';
import icon5 from '@/assets/images/guidepage/环卫管理.png';
import icon6 from '@/assets/images/guidepage/运维管理.png';
import router from 'umi/router';
import { connect } from 'dva';
import CalendarStatistic from './components/CalenderStatistic';
import SourceStatistic from './components/SourceStatistic';
import HandleStatistic from './components/HandleStatistic';
import ClassCountStatistic from './components/ClassCountStatistic';

const TabPane = Tabs.TabPane;

@connect(({ global, setting, menu: menuModel, account }) => ({
  collapsed: global.collapsed,
  layout: setting.layout,
  menuData: menuModel.menuData,
  breadcrumbNameMap: menuModel.breadcrumbNameMap,
  currentUser: account.current,
  ...setting,
}))
class Index extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const {
      dispatch,
      route: { routes, path, authority },
    } = this.props;

    dispatch({
      type: 'account/currentUser',
    });
  }

  //入口
  IconItem = (icon, title, routes) => {
    return (
      <Col span={8}>
        <div
          className={styles.entrance}
          onClick={() => {
            router.push(routes);
          }}
        >
          <img src={icon} />
          <label>{title}</label>
        </div>
      </Col>
    );
  };

  //养护单位统计
  yhdwStatistic = type => {
    let data =
      type == 'municipal'
        ? {
            data: [80, 62, 74, 67, 83, 75, 87],
            color: '#32c8cc',
            title: '园林管理季度考核排名',
            company: [
              '浙江耀美',
              '浙江天姿',
              '嘉兴园林绿化工程',
              '嘉兴汇丰',
              '南湖花卉',
              '浙江永联环境',
              '桐乡市绿耘',
            ],
          }
        : {
            data: [80, 94, 77, 85],
            color: '#24a5e8',
            title: '市政管理季度考核排名',
            company: ['杭州市路桥集团', '浙江协和建设', '浙江兴远建设', '中元建设'],
          };
    let option = {
      color: [data.color],
      title: {
        text: data.title,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      xAxis: {
        type: 'value',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: 'category',
        data: data.company,
        splitLine: { show: false },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        offset: 10,
        nameTextStyle: {
          fontSize: 15,
        },
      },
      series: [
        {
          name: '数量',
          type: 'bar',
          data: data.data,
          barWidth: 14,
          barGap: 10,
          smooth: true,
          label: {
            normal: {
              show: true,
              position: 'right',
              offset: [5, -2],
              textStyle: {
                color: '#000',
                fontSize: 13,
              },
            },
          },
          itemStyle: {
            emphasis: {
              barBorderRadius: 7,
            },
          },
        },
      ],
    };
    return option;
  };

  render() {
    const { currentUser } = this.props;

    return (
      <Fragment>
        <CommonStyle />
        <IconfontStyle />
        <DocumentTitle title="首页">
          <div>          
          <div className={styles.bgtitle}></div>
        <div className={styles.menu}>
              <Breadcrumb className={styles.breadcrumb} separator="|">
                <Breadcrumb.Item>当前用户：{currentUser.Name}</Breadcrumb.Item>
                <Breadcrumb.Item>
                  <a
                    onClick={() => {
                      setAuthority('guest');
                      sessionStorage.clear();
                      router.push('/login');
                    }}
                  >
                    退出登录
                  </a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>
                  <a href="">修改密码</a>
                </Breadcrumb.Item>
              </Breadcrumb>
            </div>
          <div className={styles.bg}>                      
            <div className={styles.ct}>
              {/* <div className={styles.ctLeft} /> */}
              <div className={styles.ctMid}>
                {/* <div className={styles.fontpage} /> */}
                <div className={styles.midwidth1}>
                  <Card
                    className={styles.rkdh}
                    title={<span className={styles.cardTitle}>入口导航</span>}
                    extra={<span>{moment().format('YYYY年MM月DD日,a好')}</span>}
                  >
                    <Row gutter={24}>
                      {this.IconItem(icon1, '一张图', '/municipal')}
                      {this.IconItem(icon2, '园林管理', '/landspace')}
                      {this.IconItem(icon3, '市政管理', '/municipal')}
                      {this.IconItem(icon4, '水务管理', '/municipal')}
                      {this.IconItem(icon5, '环卫管理', '/municipal')}
                      {this.IconItem(icon6, '运维管理', '/municipal')}
                    </Row>
                  </Card>
                  <Card
                    className={styles.yhrl}
                    title={<span className={styles.cardTitle}>养护日历</span>}
                  >
                    <CalendarStatistic />
                  </Card>
                  <Card
                    className={styles.wtly}
                    title={<span className={styles.cardTitle}>问题来源统计</span>}
                  >
                    <SourceStatistic />
                  </Card>
                </div>
                <div
                className={styles.midwidth2}
                >
                  <HandleStatistic />
                  <ClassCountStatistic />
                </div>
              </div>
            </div>
          </div>
          </div>
        </DocumentTitle>
      </Fragment>
    );
  }
}

export default Index;
